<template>
  <div v-if="notifyConfig.show" class="secure-notify flex flex-s">
    <div class="inner flex flex-col gr-4 slide-in">
      <div class="head flex justify-between">
        <div class="text-16 title"> {{ notifyConfig.title }}</div>
        <div class="cursor-pointer" @click="cancle">
          <img :src="closePng" width="16" />
        </div>
      </div>
      <div class="flex-1 msg flex flex-s">
        {{ notifyConfig.msg }}
      </div>
      <div class="flex justify-between">
        <div class="secure-button cancle" @click="cancle">取消</div>
        <div class="secure-button comfirm" @click="comfirm"> 确定 </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import closePng from '@/assets/images/close.png';
  import { notifyConfig, resetNotify } from './bus';

  const cancle = () => {
    if (notifyConfig.value.onCancle) {
      notifyConfig.value.onCancle();
    }
    resetNotify();
  };

  const comfirm = () => {
    if (notifyConfig.value.onConfirm) {
      notifyConfig.value.onConfirm();
    }
    resetNotify();
  };
</script>

<style lang="scss" scoped>
  .secure-notify {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    background-color: var(--mask);
    .inner {
      width: 300px;
      height: 200px;
      background-color: white;
      border-radius: var(--radius);
      padding: var(--padding);
    }
    .msg {
      background-color: #f8f8f8;
      border-radius: var(--radius);
    }
    .secure-button {
      height: 24px;
      line-height: 24px;
    }
    .comfirm {
      color: white;
      background-color: var(--warning);
    }
    .cancle {
      background-color: #eee;
    }
    .title {
      color: var(--warning);
    }
  }
</style>
